<template>
    <div class="page-bar">
        <ul class="page-num-ul clearfix">
            <li>
                共{{ pageInfo.totalCount }}条记录&nbsp;&nbsp; {{ pageInfo.currentPage }}/{{ pageInfo.totalPageCount }}页
            </li>
            <li>
                <a v-if="firstPage" href="#">首页</a>
                <a v-if="firstPage" href="#">上一页</a>
                <a v-if="lastPage" href="#">下一页</a>
                <a v-if="lastPage" href="#">尾页</a>
            </li>
        </ul>
        <span class="page-go-form"><label>跳转至</label>
        <input type="text" name="inputPage" id="inputPage" class="page-key"/>页
        <button type="button" class="page-btn" @onClick='toPage(pageInfo)'>GO</button>
		</span>
    </div>
</template>

<script>
export default {
    name: "CvsPage",
    props: ['pageInfo'],
    computed: {
        firstPage() {
            return this.pageInfo.currentPage > 1;
        },
        lastPage() {
            return this.pageInfo.currentPage < this.pageInfo.totalPageCount
        },
    },
    methods: {
        toPage(pageInfo) {
            console.log(pageInfo)
        },
    }
}
</script>

<style scoped>

/*页码*/
.page-bar
{
    position:relative;
    margin-top:10px;
}
.page-num-ul li
{
    float:left;
}
.page-num-ul li a
{
    display:inline-block;
    padding:3px 5px;
    margin:0px 3px;
    border:1px solid #b8b8b8;
}
.page-num-ul a:hover,.page-num-ul .thisclass
{
    border:1px solid #c5063f;
    background-color:#c5063f;
    color:#FFF;
    text-decoration:none;
}
.page-key
{
    width:50px;
}
.page-btn
{
    border:1px solid #b8b8b8;
    background-color:#fff3f8;
    display:inline-block;
    width:52px;
    height:25px;
    line-height:25px;
    font-weight:20px;
}
.page-go-form
{
    position:absolute;
    display:inline-block;
    right:50px;
    top:0px;
}
.page-go-form input,label,button
{
    margin:0px 5px;
}

</style>
